import {useDispatch, useSelector} from "react-redux";
import {useEffect, useState} from "react";
import {fetchGetAllMaterialListByPage, fetchGetOneMaterialById} from "/src/store/modules/materialStore.jsx";
import {Link} from "react-router-dom";

const Index = () => {
    const [flag,setFlag]=useState(false);
    let [materialId,setMaterialId]=useState(1);

    const {materialList,material}=useSelector(state=>state.material);
    const dispatch=useDispatch();

    useEffect(() => {
        dispatch(fetchGetAllMaterialListByPage(1,20))
    }, [dispatch]);

    const showOne=()=>{
        // setMaterialId(materialId+1);
        // console.log(materialId);
        dispatch(fetchGetOneMaterialById(materialId));
        setFlag(true);
        setMaterialId(materialId+1);
    }
    return (
        <div>
            <ul>{materialList.map(item => <li key={item.id}>{item.materialName}</li>)}</ul>
            <button onClick={showOne}>点击</button>
            <br/>
            {flag && <span>{material.materialName}</span>}
            <br/>
            <Link to="/">回首页</Link>
        </div>
    )
}

export default Index